import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:school_safe_teacher/resourse/app_colors.dart';

import 'package:school_safe_teacher/widget/my_widget.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(
    ChangePwdState state, Dispatch dispatch, ViewService viewService) {
  return body(
      child: Container(
        color: Colors.white,
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.only(left: 15, right: 15),
              child:
                  noRightIconBar(context: viewService.context, title: "修改密码"),
              color: Colors.white,
            ),
            Expanded(child: _body(state, dispatch, viewService)),
          ],
        ),
      ),
      context: viewService.context);
}

Widget _body(ChangePwdState state, Dispatch dispatch, ViewService viewService) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        height: 45,
        margin: EdgeInsets.fromLTRB(25, 10, 25, 0),
        padding: EdgeInsets.only(left: 17, right: 17, top: 5, bottom: 5),
        alignment: Alignment.center,
        width: MediaQuery.of(viewService.context).size.width - 50,
        child: TextField(
          onChanged: (value) {
            state..mobile = value;
            dispatch(ChangePwdActionCreator.onAction());
          },
          controller: state.phoneController,
          keyboardType: TextInputType.phone,
          decoration: InputDecoration(
              contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
              border: InputBorder.none,
              hintText: "请输入手机号",
              isDense: true,
              hintStyle: TextStyle(
                  fontWeight: FontWeight.normal,
                  fontSize: 14,
                  color: AppColors.hintTextColor)),
          textAlign: TextAlign.start,
          textAlignVertical: TextAlignVertical.center,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25),
            border: Border.all(color: AppColors.editBackgroundColor, width: 1),
            color: AppColors.editBackgroundColor),
      ),
      Container(
        height: 45,
        margin: EdgeInsets.fromLTRB(25, 13, 25, 0),
        padding: EdgeInsets.only(left: 17, right: 17, top: 5, bottom: 5),
        alignment: Alignment.center,
        width: MediaQuery.of(viewService.context).size.width - 50,
        child: Row(
          children: [
            Expanded(
                child: TextField(
              onChanged: (value) {
                state..code = value;
                dispatch(ChangePwdActionCreator.onAction());
              },
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: "请输入验证码",
                  isDense: true,
                  hintStyle: TextStyle(
                      fontWeight: FontWeight.normal,
                      fontSize: 14,
                      color: AppColors.hintTextColor)),
              textAlign: TextAlign.start,
              textAlignVertical: TextAlignVertical.center,
            )),
            GestureDetector(
              child: Text(
                state.countdownString,
                style: TextStyle(
                    color: state.textColor,
                    fontSize: 13,
                    fontWeight: FontWeight.normal),
              ),
              onTap: () {
                if (state.countdownTime <= 1) {
                  dispatch(ChangePwdActionCreator.onGetCodeClick());
                }
              },
            )
          ],
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25),
            border: Border.all(color: AppColors.editBackgroundColor, width: 1),
            color: AppColors.editBackgroundColor),
      ),
      SizedBox(
        height: 20,
      ),
      Container(
        margin: EdgeInsets.only(left: 25, right: 25),
        width: MediaQuery.of(viewService.context).size.width,
        child: Text(
          "至少包含字母、数字、符号2种元素",
          style: TextStyle(
              fontSize: 13,
              fontWeight: FontWeight.normal,
              color: AppColors.deepTextColor),
        ),
      ),
      Container(
        height: 45,
        margin: EdgeInsets.fromLTRB(25, 13, 25, 0),
        padding: EdgeInsets.only(left: 17, right: 17, top: 5, bottom: 5),
        alignment: Alignment.center,
        width: MediaQuery.of(viewService.context).size.width - 50,
        child: TextField(
          onChanged: (value) {
            state..pwd = value;
            dispatch(ChangePwdActionCreator.onAction());
          },
          obscureText: state.showPwd,
          decoration: InputDecoration(
              contentPadding: EdgeInsets.zero,
              border: InputBorder.none,
              suffixIcon: IconButton(
                icon: Image.asset(
                  state.pwdCanSeeImg,
                  width: 15,
                  height: 15,
                ),
                alignment: Alignment.center,
                padding: new EdgeInsets.all(0.0),
                onPressed: () {
                  state..showPwd = !state.showPwd;
                  dispatch(ChangePwdActionCreator.onShowPwd());
                },
              ),
              hintText: "请输入密码",
              isDense: true,
              hintStyle: TextStyle(
                  fontWeight: FontWeight.normal,
                  fontSize: 14,
                  textBaseline: TextBaseline.alphabetic,
                  color: AppColors.hintTextColor)),
          textAlign: TextAlign.start,
          textAlignVertical: TextAlignVertical.center,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25),
            border: Border.all(color: AppColors.editBackgroundColor, width: 1),
            color: AppColors.editBackgroundColor),
      ),
      GestureDetector(
        child: Container(
          height: 45,
          margin: EdgeInsets.fromLTRB(25, 33, 25, 0),
          alignment: Alignment.center,
          width: MediaQuery.of(viewService.context).size.width - 50,
          child: Text(
            "确认修改",
            style: TextStyle(
                color: state.loginTextColor,
                fontSize: 15,
                fontWeight: FontWeight.normal),
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25),
            color: AppColors.editBackgroundColor,
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [
                state.loginBtnStartColor,
                state.loginBtnEndColor,
              ],
            ),
          ),
        ),
        onTap: () {
          dispatch(ChangePwdActionCreator.onChangePwd());
        },
      ),
    ],
  );
}
